<!--
 * @Author: your name
 * @Date: 2021-12-30 13:21:45
 * @LastEditTime: 2022-02-17 19:25:07
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \agricultural-production-web\src\views\statistical-report\components\index.vue
-->
<template>
  <div class="searchBox">
    <div class="left">
      <div class="label-input mr-20">
        <div class="label">选择年份:</div>
        <div class="input">
          <el-date-picker
            v-model="searchList.startTime"
            type="year"
            format="yyyy 年"
            class="year"
            placeholder="选择年"
            value-format="timestamp"
            :picker-options="pickerOptions"
            @change="startEndTime"
          />
        </div>
        <!-- <div class="I"></div> -->
        <slot name="left"></slot>

        <div v-if="day" class="label">选择日期:</div>
        <div v-if="day" class="input">
          <!-- <el-date-picker
            v-model="searchList.startTime"
            type="daterange"
            format="MM 月 dd 日"
            class="day"
            value-format="timestamp"
            placeholder="选择月日"
            :picker-options="pickerOptions"
            @change="startEndTime"
          /> -->
          <el-date-picker
            v-model="startTime"
            style="width:180px"
            format="MM-dd"
            type="daterange"
            unlink-panels
            value-format="timestamp"
            start-placeholder="01-01"
            end-placeholder="12-31"
            :picker-options="pickerOptionx"
            @change="Times"
          />
        </div>
      </div>
      <Time v-if="status" :search-list="searchList" @start-date="startDate" @end-date="endDate" />
      <slot name="lefts"></slot>
    </div>
    <div class="right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
import Time from "./time.vue"
export default {
  components: {
    Time
  },
  props: {
    status: {
      type: Boolean,
      default: true
    },
    day: {
      type: Boolean,
      default: true
    },
    searchList: {
      type: Object,
      default: () => ({
        startDate: '',
        endDate: '',
        startTime: '',
        endTime: '',
        status: 0
      })
    }
  },
  data() {
    return {
      startTime: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      pickerOptionx: {

      }
    }
  },
  watch: {
    searchList: {
      deep: true,
      handler(val) {
        this.$emit('search-list', val)
        this.startTime = [val.startTime, val.endTime]
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.etPassYearFormatDate()
    })
  },
  methods: {
    startDate(e) {
      this.searchList.startDate = e
      // this.$emit('start-date', e)
    },
    endDate(e) {
      this.searchList.endDate = e
    },
    startEndTime(val) {
      // console.log(val)
      // let time = new Date()
      // let endTimes = (val).getTime()
      const y = new Date(val).getFullYear()
      const f = y + ' 12-31 23:59:59:999'
      const endTime = new Date(f).getTime()
      this.searchList.endTime = endTime
      if (val === null) {
        this.searchList.startTime = ''
      } else {
        this.searchList.startTime = val
      }
      let e = [val === null ? '' : this.searchList.startTime, this.searchList.endTime]
      this.Times(e)
    },
    Times(val) {
      // console.log(val)
      if (val !== null) {
        this.startTime = val
      } else {
        this.startTime = ','
      }
      if (val !== null) {
        if (val[0]) {
          this.searchList.startTime = this.startTime[0]
        } else {
          this.searchList.startTime = ''
        }
        if (val[1]) {
          this.searchList.endTime = this.startTime[1]
        } else {
          this.searchList.endTime = ''
        }
      }
      // console.log(val)
    },
    etPassYearFormatDate() {
      const y = new Date().getFullYear()
      // 第一天
      const f = y + ' 01-01 00:00:00'
      const date = new Date(f).getTime() - 365 * 24 * 60 * 60 * 1000
      // console.log(date)
      this.startEndTime(date)
    }

  }
}
</script>

<style lang="scss" scoped>
.searchBox{
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
    padding-left: .5%;
    justify-content: space-between
}
::v-deep .el-input__inner {
  border-radius: 5px;
  min-width: 120px;
}
::v-deep .el-date-editor {
  min-width: 120px;
  margin-right: 10px;
}
.left, .right {
    // position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    .label-input {
      display: flex;
      align-items: center;
      .label {
        min-width: 100px;
        text-align: center;
        white-space: nowrap;
      }
      .input {
        display: flex;
        align-items: center;
        .I {
          width: 20px;
        }
        .year {
          width: 80px;
        }
        .day {
          width: 140px;
        }
      }
    }
}
// .right {
//   right: 20;
// }
</style>
